<template>
    <section class="viewArea"> 
        <div class="containHead">
              <router-link to="/domain">&lt;返回</router-link>  
              |      
              <{{bindDomainName}}>绑定交换机
        </div>
        <section class="mainContainer">   
            <div class="viewContainer" style="margin-top: 20px">  
              <!-- <div class="title" style="margin: 24px 0;">查询条件：</div> 
              <div class="clearfix" style="padding-left: 20px;">  
              <label class="filter-item" for="">
                            <span>客户：</span>
                            <Select ref="customerSelect" filterable clearable v-model="filters.customer_id" placeholder="请选择" style="width: 150px;">
                            <Option v-for="(item,index) in allCustomers" :value="item.customer_id" :key="index">{{item.customer_mark}}</Option>
                            </Select>
              </label> 
              <label class="filter-item" for="">
                            <span>域名：</span>  
                            <Select ref="domainSelect" clearable filterable v-model="filters.domain_id" :label-in-value="true" @on-change="handleChangeDomain" placeholder="请选择" style="width: 300px;">
                            <Option v-for="(item) in customerRelatedomains" :value="item.id" :key="item.id">{{item.domain}}</Option>
                            </Select>
              </label>  
              <label for="" class="filter-item">
                            <Button type="primary" @click="handleQuery">查询</Button>    
              </label>   
              </div>   -->
              <!-- <p style="line-height: 20px; margin-top: 20px; font-size: 16px; padding-left: 15px; border-left:  3px solid #409EFF; margin:30px 0 20px; "><span style="font-size: 18px; font-weight:bold">{{this.last_domain_name}}</span> 域名交换机列表:</p> -->
              <div class="tabBox">  
              <Button 
                            type="primary" 
                            @click="handleAddDomainSwitch"
                            :disabled="isBinded"
                            style="margin-right: 10px;"
              >
              <Icon type="plus"></Icon>
              添加域名交换机
              </Button>  
              <Button 
                            type="primary" 
                            :disabled="!isBinded"
                            @click="handleEditDomainSwitch(switchTables)"
                            style="margin-right: 10px;"
              >
              <Icon type="edit"></Icon>
              修改域名交换机
              </Button> 
              <Button 
                            type="primary" 
                            :disabled="!isBinded"
                            @click="handleDeleteDomainSwitch(switchTables)"
              >
              <Icon type="trash-a"></Icon>
              删除域名交换机
              </Button> 
              <Row style="padding-top: 20px">
                            <Col span="24">
                            <Table size="small" width="100%"  :columns="columns" :data="switchTables.switch" ellipsis></Table>
                            </Col>
              </Row> 
              </div>  
            </div>
        </section>
        <CreateDomainSwitch 
            :title="create ? '添加绑定域名交换机' : '修改绑定域名交换机'"
            :visible="dialogFormVisible"
            :data="switchData"
            :isCreate="create"
            :domainName="last_domain_name"
            @closeModal="handleCloseModal"
            @save="handleSaveModal"
        /> 
    </section>
</template>

<script> 
/*******
 * explain: 弹窗不可选域名，在查询后对该域名进行新增，修改操作 
 *         否则：容易导致新增已存在数据的域名
 * 
 * *********/
import { mapGetters } from 'vuex' 
import  { SERVICE_OPTIONS, EMPTY_SWITCH_DATA } from '@/utils/opts'  
import CreateDomainSwitch from './CreateDomainSwitch' 
export default {
    name: "DomainSwitchBind",
    computed: {
        ...mapGetters(['allCustomers', 'customerRelatedomains', 'switchTables'])
    }, 
    components: {
        CreateDomainSwitch, 
    },
    data(){
        let query =  this.$route.query;
        return {
            tabType: 'tableView',
            create: true,
            dialogFormVisible: false,
            switchData: EMPTY_SWITCH_DATA,
            tableView: true,
            chartView: true, 
            last_domain_id: query.domain_id,
            domain_name: query.domain_name,
            last_domain_name: query.domain_name,
            domain_id: query.domain_id,
            filters: {
                customer_id: [], 
                domain_id: ''
            }, 
            columns:[ 
                {
                    title: 'host', 
                    key: 'host' 
                },
                {
                    title: 'community', 
                    key: 'community' 
                },
                {
                    title: 'indexes', 
                    key: 'indexes',
                    render(h, row){
                        let 
                            indexes = row.row.indexes,
                            len = indexes.length;
                        return <span>
                            {
                                row.row.indexes.map((item, index) => {
                                    let v = "";
                                    if (item.indexOf(":", 0) !== -1) {
                                      let tmp = item.split(":");
                                      v = tmp[0] + "(Index=" + tmp[1] + ")";
                                    } else {
                                      v = item;
                                    }
                                    return <em>{v}{len - 1 === index || ','}</em>
                                }) 
                            }
                        </span>
                    }

                },
            ],
            bindDomainName: this.$route.query.domain_name, 
            isBinded: false
        }
    },
    watch:{
        ['filters.customer_id'](val){
            this.fetchCustomerRelateDomain()
        }, 
        ['switchTables.switch'](val){ 
            this.isBinded = val.length > 0
        }
    },
    created(){  
        this.fetchDomainSwitchList(parseInt(this.$route.query.domain_id))
    },
    methods: {
        fetchCustomerRelateDomain(){ 
            let _this = this
            let condition = {
                params: {
                    customer_id: _this.filters.customer_id
                },
                cb(_data){  
                    _this.$refs.domainSelect.clearSingleSelect()
                }
            }
            _this.$store.dispatch('fetchCustomerRelateDomain', condition);
        }, 
        //一次性查交换机和交换机数据
        handleQuery(){     
            if(!this.filters.domain_id){
                this.$Message.warning("请选择查询域名")
                return 
            }
            this.fetchDomainSwitchList()
            this.last_domain_id = this.filters.domain_id
            this.last_domain_name = this.domain_name
        },
        fetchDomainSwitchList(domain_id = this.filters.domain_id){
            let 
                _this = this,
                condition = {
                    params: {
                        domain_id,
                    },
                    cb(_data){
                        if(_data.ok && this.type === 'chart'){
                            _this.renderCharts()
                        }
                    } 
                }
            _this.$store.dispatch('fetchDomainSwitchList', condition)

        },
        //弹窗保存
        handleSaveModal(params){ 
            let _this = this;
            if(_this.create){ //添加
                _this.$store.dispatch('createDomainSwitch', {
                    params,
                    cb(_data){  
                        if(_data.ok){
                            _this.$Message.success("保存成功") 
                            _this.dialogFormVisible = false
                            _this.last_domain_id && _this.fetchDomainSwitchList(_this.last_domain_id);
                        }else{ 
                            _this.$Message.error("保存失败") 
                        }
                    }
                })  
            }else{
                params.customer_id = _this.customer_id
                _this.$store.dispatch('putDomainSwitch', {
                    params,
                    cb(_data){  
                        if(_data.ok){
                            _this.$Message.success("修改成功") 
                            _this.dialogFormVisible = false
                            _this.last_domain_id && _this.fetchDomainSwitchList(_this.last_domain_id);
                        }else{ 
                            _this.$Message.error("修改失败") 
                        }
                    }
                })   
            }
        },
        //添加
        handleAddDomainSwitch(){ 
            if(!this.last_domain_id){
                this.$Message.warning('请先选择域名')
                return 
            }
            this.create = true
            this.dialogFormVisible = true
            this.switchData = JSON.parse(JSON.stringify(EMPTY_SWITCH_DATA))
            this.switchData.domain_id = this.last_domain_id
        },
        //编辑
        handleEditDomainSwitch(data){  
            if(!this.last_domain_id){
                this.$Message.warning('请先选择域名')
                return 
            }
            this.create = false
            this.dialogFormVisible = true
            this.switchData = data
        },
        //删除
        handleDeleteDomainSwitch(d){
            let 
                _this = this,
                params = {
                            domain_id: _this.last_domain_id
                        }
            _this.$Modal.confirm({
                title: '删除域名交换机',
                content: `确认删除${_this.last_domain_name}域名下所有交换机吗？`,
                onOk: () => { 
                    _this.$store.dispatch('deleteDomainSwitch', {
                        params,
                        cb(_data){  
                            if(_data.ok){ 
                                _this.$Message.success("删除成功")  
                            }else{ 
                                _this.$Message.error("删除失败")
                            }
                        }
                    })   
                }, 
            }); 
        },
        handleCloseModal(){
            this.dialogFormVisible = false
        },
        handleChangeTab(name){
            this.tabType = name  
            if(name === 'tableView') {
                this.$refs.customerSelect.clearSingleSelect()
                this.$refs.domainSelect.clearSingleSelect()
            }
            //获取所有客户
            this.$store.dispatch('fetchAllCustomerList')
            //获取所有域名
            this.$store.dispatch('fetchCustomerRelateDomain', {params:{customer_id: ''}}); 
        }, 
        handleChangeDomain(d){ 
            if(d) this.domain_name = d.label
        }, 
    },
}
</script>

<style lang="scss">
    .filter-item:not(:first-child){
        margin-left: 20px;
        margin-bottom: 20px;
    }
   .mainContentWrap .filter-item .ivu-tag-text{
        color: #495060!important;
    }
    .viewContainer{
    .tabBox{
        padding: 0 20px;
        min-height: 600px;
    }
    .title{
        border-left:  3px solid #409EFF;
        font-size: 16px;
        color: #333;
        padding-left: 10px;
        margin-bottom: 15px;
    }
    }
</style>

